import React, { Component } from 'react';
import {
    Modal,
    Form,
    Input,
    DatePicker,
    Button,
    Space,
    message,
   } from 'antd';
import EditorUpload  from"./editorUpload";
import style from '../editor/editor.module.css'
 import {put} from '../../utils/put'

class Editor extends Component {
    componentWillReceiveProps(nextProps) {
        this.setState({
            isShow: nextProps.isShow
        });
    }

    constructor(props) {
        super(props);
        this.state = {
            isShow: false,
            nickname: '',
            avatar:'',
            profile: '',
            phone:'',
            email:'',
            gender:0,
            date: '',
            loading: false
        }
    }
    saveAvatar=(data)=>{
        if(data.length>0)
            this.setState({avatar:'http://baiblog.oss-cn-guangzhou.aliyuncs.com/'+data[0]?.url},
                ()=>console.log(this.state.avatar))
        else
            this.setState({avatar:""},()=>console.log(this.state.avatar));
    }

// 保存date
     saveDate = (date, dateString)=> {
         console.log(date,dateString);
         const now = new Date()
         const year = now.getFullYear()
         const age = year - dateString.slice(0,4)
         this.setState({
             date: dateString,
             age: age
         })
  }

// 保存nickname
     saveNickName = (e) =>{
        this.setState({
            nickname: e.target.value
        })
     }

// 保存个人介绍
     saveProFile = (e) =>{
         this.setState({
             profile: e.target.value
         })
     }
//保存性别
     saveGender=(e)=>{
         console.log(e.target.value)
         this.setState({
             gender:e.target.value
         })
     }
// 保存邮箱
     saveEmail = (e) =>{
         this.setState({
             email: e.target.value
         })
     }
//保存手机号
     savePhone= (e)=>{
         this.setState({
             phone:e.target.value
         })
     }

// 提交
     onFinish = async(e) =>{
        const {nickname,phone,profile,email,date,avatar,gender} = this.state
         const token=localStorage.getItem('TOKEN')
         const data={
             nickname,
             avatar,
             phone,
             profile,
             gender:Number(gender),
             email,
             birthDate:date,
         }
        const res = await put('/sysuser/update',data,token)
        if(res.data.code===0){
            const {avatar,nickname,username,token,userUid}=res.data.data;
            const roles = JSON.parse(localStorage.getItem('USERDATA')).roles
           localStorage.setItem('USERDATA',JSON.stringify({
               avatar,
               nickname,
               username,
               userUid,
               roles
           }))
            localStorage.setItem('TOKEN',token);
           message.success('修改成功');
           this.props.changShow(false);
           this.props.setInfo([nickname,avatar]);
           this.props.update();
        }
        else {
            message.error(res.data.errorMsg);
        }
     }
// 失败提交
     onFinishFailed = (e) =>{
         console.log('Failed:',e);
     }
    render() {
        return (
            <div>
                <Modal
                    title="编辑个人资料"
                    centered
                    visible={this.state.isShow}
                    footer={null}
                    onOk={() => this.props.changShow(false)}
                    onCancel={() => this.props.changShow(false)}
                    width={600}
                >
                    <Form
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        initialValues={{ size: this.state.size }}
                        size={this.state.size}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <EditorUpload onChange={this.saveAvatar}/>
                        <Form.Item label="昵称">
                            <Input  value={this.state.nickname} placeholder='20字以内哦~' maxLength={20} onChange={this.saveNickName}/>
                        </Form.Item>
                        <Form.Item label="手机号码">
                            <Input value={this.state.phone} type="tel" placeholder="请输入手机号" onChange={this.savePhone} />
                        </Form.Item>
                        <Form.Item label="邮箱地址">
                            <Input value={this.state.email} type="email" placeholder="请输入邮箱" onChange={this.saveEmail} />
                        </Form.Item>
                        <Form.Item label="性别" className={style.gender} onChange={this.saveGender}>
                            <Input value={0} name="gender" type="radio" id="unknown"/>
                            <label for="unknown">未知</label>
                            <Input value={1} name="gender" type="radio" id="male"/>
                            <label for="male">男</label>
                            <Input value={2} name="gender" type="radio" id="female" />
                            <label for="female">女</label>
                        </Form.Item>
                        <Form.Item label="个人简介">
                            <Input placeholder='20字以内哦~' maxLength={20} value={this.state.profile} onChange={this.saveProFile}/>
                        </Form.Item>
                        <Form.Item label="生日">
                           <Space>
                                <DatePicker onChange={this.saveDate}/>
                           </Space>
                        </Form.Item>
                        <Form.Item className={style.submit}>
                        <Button type="primary" htmlType="submit">修改</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}


export default Editor;
